<template>
	<div class="home-container">
		<!-- <div class="home-text">name: {{ name }}</div> -->
		<!-- <el-row :gutter="20" class="panel-group"> -->
		<el-row :gutter="20" class="panel-group">
			<el-col :span="6" class="panel-card">
				<div class="panel-card__item" @click="goto('category')">
					<div class="panel-card__item--left">
						<span class="number">{{info.tjlx}}</span>
						<span class="title">体检分类</span>
					</div>
					<div class="panel-card__item--right">
						<i class="fa fa-tag" aria-hidden="true"></i>
					</div>
				</div>
			</el-col>
			<el-col :span="6" class="panel-card">
				<div class="panel-card__item" @click="goto('item')">
					<div class="panel-card__item--left">
						<span class="number">{{info.tjxm}}</span>
						<span class="title">体检项目</span>
					</div>
					<div class="panel-card__item--right">
						<i class="fa fa-heartbeat" aria-hidden="true"></i>
					</div>
				</div>
			</el-col>
			<el-col :span="6" class="panel-card">
				<div class="panel-card__item" @click="goto('comment')">
					<div class="panel-card__item--left">
						<span class="number">{{info.yzsl}}</span>
						<span class="title">医嘱数量</span>
					</div>
					<div class="panel-card__item--right">
						<i class="fa fa-thermometer-three-quarters" aria-hidden="true"></i>
					</div>
				</div>
			</el-col>
			<el-col :span="6" class="panel-card">
				<div class="panel-card__item" @click="goto('reply')">
					<div class="panel-card__item--left">
						<span class="number">{{info.tssl}}</span>
						<span class="title">投诉数量</span>
					</div>
					<div class="panel-card__item--right">
						<i class="fa fa-commenting " aria-hidden="true"></i>
					</div>
				</div>
			</el-col>

		</el-row>
		<el-row :gutter="20" class="panel-group">
			<el-col :span="8" class="panel-card">
				<div class="panel-card__item" @click="goto('auser')">
					<div class="panel-card__item--left">
						<span class="number">{{info.user}}</span>
						<span class="title">用户</span>
					</div>
					<div class="panel-card__item--right">
						<i class="fa fa-user" aria-hidden="true"></i>
					</div>
				</div>
			</el-col>
			<el-col :span="8" class="panel-card">
				<div class="panel-card__item" @click="goto('auser')">
					<div class="panel-card__item--left">
						<span class="number">{{info.doctor}}</span>
						<span class="title">医生</span>
					</div>
					<div class="panel-card__item--right">
						<i class="fa fa-user-md" aria-hidden="true"></i>
					</div>
				</div>
			</el-col>
			<el-col :span="8" class="panel-card">
				<div class="panel-card__item" @click="goto('auser')">
					<div class="panel-card__item--left">
						<span class="number">{{info.admin}}</span>
						<span class="title">管理员</span>
					</div>
					<div class="panel-card__item--right">
						<i class="fa fa-user-secret" aria-hidden="true"></i>
					</div>
				</div>
			</el-col>
		</el-row>
	</div>
</template>

<script>
import _api from '@api'
export default {
	name: 'Home',
	data() {
		return {
			info: {}
		}
	},
	methods: {
		async fetchInfo() {
			const data = await _api.getStatisticInfo()
			this.info = data
		},
		goto(name) {
			this.$router.push({ name })
		}
	},
	mounted() {
		this.fetchInfo()
	}
}
</script>

<style lang="less" scoped>
.home {
	&-container {
		margin: 30px;
	}
}
.panel {
	&-group {
		/* background-color: #f0f0f0; */
	}
	&-card {
		transition: all 0.5s;
		&__item {
			box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
			border-radius: 0.625rem;
			width: 100%;
			/* height: 108px; */
			padding: 1.4rem 0;
			margin-bottom: 20px;
			cursor: pointer;
			font-size: 12px;
			position: relative;
			overflow: hidden;
			color: #666;
			background: #fff;
			border-color: rgba(0, 0, 0, 0.05);
			transition: all 0.5s;
			display: flex;
			align-items: center;
			text-align: center;
			/* justify-content: center; */
			&--left {
				flex: 3;
				display: flex;
				flex-direction: column;
				.number {
					font-size: 2.375rem;
					font-weight: 700;
					line-height: 1.65857;
				}
				.title {
					font-size: 1.125rem;
					color: #bab8b8;
				}
			}
			&--right {
				flex: 2;
				.fa {
					font-size: 3.75rem;
				}
			}
		}
		&:hover {
			transform: translateY(4px);
		}
	}
}
</style>
